<template>
  <div>
    <!-- el过渡动画 -->
    <transition name="el-fade-in-linear">
      <!-- 导航栏 -->
      <div v-show="toolbar.visible"
           @mouseenter="hoverEnter = true"
           @mouseleave="hoverEnter = false"
           :class="[{ enter: toolbar.enter }, { hoverEnter: hoverEnter && !toolbar.enter }]"
           class="toolbar-content myBetween">
        <!-- 网站名称 -->
        <div class="toolbar-title">
          <h2 @click="$router.push({path: '/'})">{{$store.state.webInfo.webName}}</h2>
        </div>

        <!-- 手机导航按钮 -->
        <div v-if="$common.mobile() || mobile"
             class="toolbar-mobile-menu"
             @click="toolbarDrawer = !toolbarDrawer"
             :class="{ enter: toolbar.enter }">
          <i class="el-icon-s-operation"></i>
        </div>

        <!-- 导航列表 -->
        <div v-else>
          <ul class="scroll-menu">
            <li @click="$router.push({path: '/'})">
              <div class="my-menu">
                <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
                  <path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
                  <path
                    d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
                    fill="#F9F8F7"></path>
                  <path
                    d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
                    fill="#FAD996"></path>
                  <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
                        p-id="16219"></path>
                  <path
                    d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
                    fill="#F9F8F7"></path>
                  <path
                    d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
                    fill="#EFEBE8"></path>
                  <path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
                  <path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
                </svg>
                <span>&nbsp;首页</span>
              </div>
            </li>
            <li v-for="(menu, index) in $store.getters.navigationBar"
                @click="$router.push({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"
                :key="index">
              <div class="my-menu">
                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">
                  <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
                  <path
                    d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
                    fill="#FFAA44"></path>
                  <path
                    d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
                    fill="#FF7744"></path>
                  <path
                    d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                    fill="#FFFFFF"></path>
                </svg>
                <span>&nbsp;{{ menu.sortName }}</span>
              </div>
            </li>

            <!-- 聊天室 -->
            <li @click="goIm()">
              <div class="my-menu">
                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">
                  <path
                    d="M544.54784 628.16768a173.7216 173.7216 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.7216 173.7216 0 0 1 0 245.17632L788.992 628.16768a172.50816 172.50816 0 0 1-244.44416 0z m-325.49888 324.608a173.71648 173.71648 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.71648 173.71648 0 0 1 0 245.1712l-158.63808 159.09376a172.51328 172.51328 0 0 1-244.46976 0z"
                    fill="#F4CA1C"></path>
                  <path
                    d="M415.6416 567.72096a36.58752 36.58752 0 0 1-25.99936-10.80832 215.58272 215.58272 0 0 1-63.52896-149.15072A203.80672 203.80672 0 0 1 385.536 259.072l163.1744-163.7376c80.70656-80.9728 213.86752-79.104 296.82688 4.13696a215.61856 215.61856 0 0 1 63.53408 149.15072 203.776 203.776 0 0 1-59.392 148.67968l-105.2928 101.83168a36.8384 36.8384 0 0 1-51.03616-53.13024l104.79104-101.376a130.12992 130.12992 0 0 0 37.376-94.78144 142.06976 142.06976 0 0 0-41.984-98.21184c-54.30272-54.48192-140.8-56.32-192.82944-4.13696L437.51936 311.26016a130.50368 130.50368 0 0 0-37.888 95.26272 142.08512 142.08512 0 0 0 41.984 98.21184 36.97664 36.97664 0 0 1 0 52.18304 36.58752 36.58752 0 0 1-25.97376 10.8032z m-169.30816 346.34752a214.74304 214.74304 0 0 1-152.20736-63.67232c-82.85184-83.13856-84.81792-216.48384-4.46976-297.472l104.96-110.80704a36.82816 36.82816 0 1 1 53.30432 50.83648l-105.91232 111.79008c-52.0192 52.1984-50.176 138.99264 4.1216 193.47456s140.8 56.32 192.82432 4.13184l163.18976-163.74784a130.47808 130.47808 0 0 0 37.888-95.232 142.09536 142.09536 0 0 0-41.984-98.21696 36.83328 36.83328 0 0 1 51.9936-52.18304 215.6288 215.6288 0 0 1 63.53408 149.15584 203.81184 203.81184 0 0 1-59.392 148.67968L390.95296 854.528a203.08992 203.08992 0 0 1-144.61952 59.54048z"
                    fill="#595BB3"></path>
                </svg>
                <span>&nbsp;社交</span>
              </div>
            </li>
            <!-- 微言 -->
<!--            <li @click="$router.push({path: '/weiYan'})">-->
<!--              <div class="my-menu">-->
<!--                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">-->
<!--                  <path-->
<!--                    d="M252.8 862.9h-73.4c-6.8 0-12.4-5.6-12.4-12.4V134.4c0-6.8 5.6-12.4 12.4-12.4h73.4l5.3 6.8v728.8l-5.3 5.3z"-->
<!--                    fill="#F2B843"></path>-->
<!--                  <path d="M338.5 942l-42.9-18.1-42.8 18.1v-79.1l7.5-5.3h71.3l7 5.3-0.1 79.1z" fill="#EA800C"></path>-->
<!--                  <path-->
<!--                    d="M844.6 327.9h-40.7l-5.3-5.8v-93.3l5.3-7.2h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.9-5.6 12.4-12.4 12.4z"-->
<!--                    fill="#F2B843"></path>-->
<!--                  <path-->
<!--                    d="M844.6 540.5h-40.7l-5.3-7.3v-90.6l5.3-8.4h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
<!--                    fill="#EA800C"></path>-->
<!--                  <path-->
<!--                    d="M844.6 753h-40.7l-5.3-6.7v-92.1l5.3-7.5h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
<!--                    fill="#2F9B77"></path>-->
<!--                  <path d="M791.8 862.9h-539V122h539.1c6.7 0 12 5.4 12 12v716.8c0 6.7-5.4 12.1-12.1 12.1z"-->
<!--                        fill="#3DC38A"></path>-->
<!--                  <path-->
<!--                    d="M680.3 661.1H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5zM680.3 779.8H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5z"-->
<!--                    fill="#2F9B77"></path>-->
<!--                  <path-->
<!--                    d="M594.8 511.1c-79.2 45.7-180.5 18.6-226.3-60.6S350 270 429.2 224.2s180.5-18.6 226.3 60.6 18.5 180.6-60.7 226.3z"-->
<!--                    fill="#3DC38A"></path>-->
<!--                  <path-->
<!--                    d="M523.7 318.1c-1.2 0.3-3.5 0.9-4.5 1.7-1.2 1 0.7 2.3 0 2.9-1.2 1-2.1 2.7-4.7 2.6-5.5-0.3-13.9-7.5-19-10.2 8.1-8.3-4.7-9.6-9.7-9.1-6.5 0.5-17.7 0-23.5 3.2-4.1 2.3-9.5 11.7-12.8 15.5-4.6 5.2-9.1 9.8-12.1 16-10.9 23 5.9 49.4 32.2 46.3 7.3-0.9 14.9-5.5 21.4 0.6 4.8 4.5 2.3 8.7 3.5 13.9 1.1 4.5 6.1 7.3 7.8 11.4 3.3 7.9 1.2 12.9-1.1 20.2-3.1 9.6 4.9 21 8 30.2 1.6 4.7 6.1 17.7 10.7 19.8 7.1 3.2 18.1-6.4 22.4-11.6 3.3-4.1 2.2-8.2 4.4-12 2.4-4.1 5.4-5.3 7.1-10.6 1.8-5.7 3.7-7.1 7.5-11.3 6.2-6.7 5.2-10.6 2.7-18.6-5.1-16.5 13.5-24.2 21.8-36.3 8.7-12.6-8.2-8.4-14.8-12.8-6.8-4.4-9.8-12.9-13.1-19.9s-6-17.5-11.4-23.3c-4.2-4.3-16.9-6.4-22.8-8.6zM609.2 428.8c-2.6 8.9-5.3 17.8-7.9 26.7-1.8 6.2-8.4 26.6-17.5 13.6-3.5-5-0.6-11.4 1.3-16 2.4-5.8-0.9-8.7 0.9-14.1 2-6.2 10-6.4 13.8-10.8 2.7-3 4.3-7.9 6.2-11.5 1 4 2.1 8.1 3.2 12.1z"-->
<!--                    fill="#F2B843"></path>-->
<!--                  <path-->
<!--                    d="M655.4 284.9c-28.5-49.4-78.7-78.5-131.6-82.4l-21.6 27.2-46.4 16.3-12.5 30.2 19.2 26.9 2-5.7c3.4-9.5 12.4-15.8 22.5-15.8h31.7l36.4 12.8 12.5 12v7.6l17.4 33.4 5.1-1.9c11-4 20.9-10.4 29.2-18.7l-4.2-6.3c-1.4-2 0.1-4.7 2.5-4.7h10.2c3 0 5.8 1.3 7.7 3.6l8.3 9.7c0.8 0.9 1.4 2 1.8 3.1l9.1 25.2 4.4-4.4c2.7-2.7 4.1-6.5 4.2-10.4 0-3.1 1.4-6.1 3.7-8.2l3.4-3c0.8-0.8 1.8-1.4 2.8-1.8-3.6-15.3-9.5-30.4-17.8-44.7zM407.6 291.3l7.9-8.5c5.8-6.2 7.4-15.2 4.2-23-3.4-8.3-10.9-13.6-19.2-14.8-29.2 26.5-47.4 62.2-52.6 100 6.2 5.4 12.6 11.2 12.6 11.7-0.1 1 23.2-2.9 23.2-2.9l-12-17.5 17.2-12.3 18.7-32.7zM423.8 456.4c7.5-2.4 11.6-10.4 9.1-17.9l-2.1-6.6c-0.9-2.9-0.9-5.9 0-8.8 2.7-8.1-2.4-16.8-10.8-18.4l-16.8-3.3-30.6-23.2-25.3 8.2c2.5 21.9 9.4 43.7 21.2 64.1 10.9 18.8 24.9 34.7 41 47.4l7.5-39.3 6.8-2.2z"-->
<!--                    fill="#2F9B77"></path>-->
<!--                </svg>-->
<!--                <span>&nbsp;微言</span>-->
<!--              </div>-->
<!--            </li>-->

            <!-- 留言 -->
            <li @click="$router.push({path: '/message'})">
              <div class="my-menu">
                <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
                  <path
                    d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                    fill="#FFDEAD"></path>
                  <path
                    d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                    fill="#FFF3DB"></path>
                  <path
                    d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                    fill="#F2C182"></path>
                  <path
                    d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                    fill="#69BAF9"></path>
                  <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                        fill="#F7FBFF"></path>
                  <path
                    d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                    fill="#D8E3F0"></path>
                  <path
                    d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                    fill="#599ED4"></path>
                  <path
                    d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                    fill="#3D3D63"></path>
                  <path
                    d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                    fill="#3D3D63"></path>
                </svg>
                <span>&nbsp;留言</span>
              </div>
            </li>
            <!-- 友人帐 -->
            <li @click="$router.push({path: '/friend'})">
              <div class="my-menu">
                <span>💃&nbsp;友人帐</span>
              </div>
            </li>

            <!-- 关于 -->
            <li @click="$router.push({path: '/about'})">
              <div class="my-menu">
                <svg viewBox="0 0 1136 1024" width="22" height="22" style="vertical-align: -5px;">
                  <path
                    d="M255.015385 409.796923s-113.821538-16.344615-106.338462 80.147692c7.483077 96.295385 106.338462 78.769231 106.338462 78.769231s66.363077 252.652308 332.8 257.772308 346.584615-260.135385 346.584615-260.135385 106.338462 32.492308 116.381538-76.209231-111.458462-81.526154-111.458461-81.526153S888.123077 155.766154 587.815385 153.403077s-332.8 256.393846-332.8 256.393846z"
                    fill="#FFC0A9"></path>
                  <path
                    d="M595.101538 846.375385h-7.68c-145.526154-2.756923-233.550769-76.8-281.6-138.436923-37.021538-47.458462-56.516923-94.326154-64.984615-118.153847-19.101538 0.393846-49.821538-2.56-74.633846-21.858461-22.252308-17.132308-34.855385-42.929231-37.415385-76.603077-2.56-31.901538 6.104615-57.304615 25.403077-75.421539 25.206154-23.630769 62.227692-27.569231 84.48-27.175384 5.907692-25.206154 20.283077-72.467692 53.76-119.729231 44.504615-62.621538 131.544615-137.058462 295.384616-135.68 163.052308 1.378462 255.212308 74.830769 303.852307 136.270769 36.627692 46.276923 54.547692 92.16 62.227693 116.775385 23.236923-2.166154 62.424615-1.378462 89.403077 22.252308 21.267692 18.707692 30.523077 46.670769 27.175384 83.101538-3.544615 38.006154-17.92 65.772308-42.732308 82.510769-27.372308 18.313846-60.258462 17.723077-80.344615 14.966154-9.649231 25.009231-31.704615 73.255385-70.892308 121.501539-72.073846 88.812308-169.353846 135.68-281.403077 135.68zM269.784615 545.673846l4.726154 17.92c0.196923 0.590769 16.541538 61.046154 63.803077 120.910769 62.227692 78.966154 146.313846 119.926154 249.895385 121.895385 248.32 4.529231 326.104615-243.396923 326.892307-245.956923l5.71077-19.298462 19.298461 5.907693c0.393846 0 39.384615 11.421538 65.378462-6.104616 14.375385-9.649231 22.843077-27.569231 25.009231-52.775384 2.166154-22.843077-2.363077-39.384615-13.587693-49.23077-20.086154-17.723077-59.864615-13.587692-73.452307-10.633846l-19.889231 4.529231-4.135385-20.086154c-0.196923-0.590769-12.996923-60.652308-60.258461-119.729231-62.818462-78.375385-154.387692-118.744615-271.753847-119.72923-117.76-0.984615-205.784615 38.990769-262.498461 118.744615-42.338462 59.667692-50.215385 119.532308-50.215385 120.123077l-2.56 20.283077-20.086154-2.953846c-13.193846-1.772308-51.593846-2.56-70.892307 15.556923-10.043077 9.452308-14.375385 23.630769-12.8 43.126154 1.772308 22.252308 8.861538 38.006154 22.055384 48.04923 23.827692 18.510769 60.455385 12.603077 60.849231 12.603077l18.510769-3.150769z"
                    fill="#493B4E"></path>
                  <path
                    d="M481.069296 499.027638a35.050906 35.050906 0 1 0 3.652962-70.006569 35.050906 35.050906 0 1 0-3.652962 70.006569Z"
                    fill="#493B4E"></path>
                  <path
                    d="M704.993567 510.606399a35.050906 35.050906 0 1 0 3.652961-70.00657 35.050906 35.050906 0 1 0-3.652961 70.00657Z"
                    fill="#493B4E"></path>
                  <path
                    d="M537.6 597.464615s-5.710769 50.806154 48.836923 54.35077c54.547692 3.544615 54.547692-45.489231 54.547692-45.489231s37.021538-31.507692 50.412308 4.332308c13.390769 35.643077-40.172308 85.858462-95.113846 86.843076s-115.003077-41.550769-109.686154-97.476923c0-0.196923 19.495385-36.627692 51.003077-2.56z"
                    fill="#493B4E"></path>
                  <path
                    d="M634.092308 172.307692s-118.350769 14.966154-93.932308 70.301539c24.418462 55.335385 81.329231 61.44 81.329231 61.44s119.926154 18.116923 33.28-54.547693c0 0-23.04 7.68-41.747693 2.166154s-21.070769-49.033846 4.923077-52.972307 98.067692 13.587692 103.384616 49.624615 41.353846 68.923077-61.243077 112.049231c0 0-144.738462 10.043077-162.264616-112.836923 0 0-17.329231-22.449231 17.132308-73.058462 34.264615-50.806154 119.138462-2.166154 119.138462-2.166154z"
                    fill="#493B4E"></path>
                </svg>
                <span>&nbsp;关于</span>
              </div>
            </li>
            <!-- 个人中心 -->
            <li>
              <el-dropdown placement="bottom">
                <el-avatar class="user-avatar" :size="36"
                           style="margin-top: 12px"
                           :src="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar">
                </el-avatar>

                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push({path: '/user'})"
                                    v-if="!$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-user-circle" aria-hidden="true"></i> <span>个人中心</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="logout()" v-if="!$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-sign-out" aria-hidden="true"></i> <span>退出</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push({path: '/user'})"
                                    v-if="$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-sign-in" aria-hidden="true"></i> <span>登陆</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <div id="main-container">
      <router-view></router-view>
    </div>

    <!-- 回到顶部按钮 -->
    <div href="#" class="cd-top" v-if="!$common.mobile()" @click="toTop()"></div>

    <div class="toolButton" v-show="toolButton">
      <div class="backTop" v-if="$common.mobile()" @click="toTop()">
        <!-- 回到顶部按钮 -->
        <svg viewBox="0 0 1024 1024" width="50" height="50">
          <path
            d="M696.741825 447.714002c2.717387-214.485615-173.757803-312.227566-187.33574-320.371729-10.857551 5.430775-190.050127 103.168727-187.33274 320.371729-35.297037 24.435488-73.306463 65.1623-67.875688 135.752376 5.430775 70.589076 76.018851 119.460051 103.168726 116.745664 27.152875-2.716387 19.004713-21.7221 19.004713-21.7221l8.148162-38.011425s40.721814 59.732525 51.583363 59.732525h146.609927c13.574938 0 51.585363-59.732525 51.585363-59.732525l8.147162 38.011425s-8.147162 19.005713 19.004713 21.7221c27.148876 2.714388 97.738951-46.156588 103.168727-116.745664s-32.57965-111.316888-67.876688-135.752376z m-187.33574-2.713388c-5.426776 0-70.589076-2.717387-78.733239-78.737238 2.713388-73.306463 73.306463-78.733239 78.733239-81.450626 5.430775 0 76.02385 8.144163 78.736238 81.450626-8.143163 76.019851-73.305463 78.737238-78.736238 78.737238z m0 0"
            fill="#000000"></path>
          <path
            d="M423.602441 746.060699c6.47054-6.297579 12.823107-7.017417 21.629121-2.784372 34.520213 16.582259 70.232157 19.645568 107.031855 9.116944 8.118169-2.323476 15.974396-5.475765 23.598677-9.22392 13.712907-6.73648 26.003134 0.8878 26.080116 16.13936 0.109975 22.574907-0.024994 45.142816 0.080982 67.709725 0.031993 7.464316-2.277486 13.322995-9.44387 16.608254-7.277358 3.333248-13.765895 1.961558-19.526595-3.264264-3.653176-3.313253-7.063407-6.897444-10.634601-10.304675-6.563519-6.259588-6.676494-6.25259-10.625603 1.603638-8.437097 16.80121-16.821205 33.623415-25.257302 50.423625-2.489438 4.953882-5.706713 9.196925-11.411426 10.775569-8.355115 2.315478-15.772442-1.070758-20.272427-9.867774-8.774021-17.15313-17.269104-34.453228-25.918153-51.669344-3.750154-7.469315-3.9891-7.479313-10.141712-1.514658-3.715162 3.602187-7.31435 7.326347-11.142486 10.800563-5.571743 5.060858-11.934308 6.269586-18.936728 3.207277-6.82746-2.984327-9.869774-8.483086-9.892769-15.685462-0.070984-23.506697-0.041991-47.018393-0.020995-70.532089 0.007998-4.679944 1.46467-8.785018 4.803916-11.538397z"
            fill="#000000"></path>
        </svg>
      </div>

      <el-popover placement="left"
                  :close-delay="100"
                  trigger="click">
        <div slot="reference">
          <i class="fa fa-cog iconRotate" aria-hidden="true"></i>
        </div>
        <div class="my-setting">
          <div>
            <!-- 太阳按钮 -->
            <i v-if="isDark" class="el-icon-sunny iconRotate" @click="changeColor()"></i>
            <!-- 月亮按钮 -->
            <i v-else class="fa fa-moon-o" aria-hidden="true" @click="changeColor()"></i>
          </div>
          <div>
            <i class="fa fa-snowflake-o" aria-hidden="true" @click="changeMouseAnimation()"></i>
          </div>
        </div>
      </el-popover>
    </div>

    <!-- 点击动画 -->
    <canvas v-if="mouseAnimation" id="mousedown"
            style="position:fixed;left:0;top:0;pointer-events:none;z-index: 1000">
    </canvas>

    <el-drawer :visible.sync="toolbarDrawer"
               :show-close="false"
               size="65%"
               custom-class="toolbarDrawer"
               title="欢迎光临"
               direction="ltr">
      <div>
        <ul class="small-menu">
          <li @click="smallMenu({path: '/'})">
            <div>
              <svg viewBox="0 0 1024 1024" width="22" height="22" style="vertical-align: -3px;">
                <path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
                <path
                  d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
                  fill="#F9F8F7"></path>
                <path
                  d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
                  fill="#FAD996"></path>
                <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
                      p-id="16219"></path>
                <path
                  d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
                  fill="#F9F8F7"></path>
                <path
                  d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
                  fill="#EFEBE8"></path>
                <path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
                <path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
              </svg>
              <span>&nbsp;首页</span>
            </div>
          </li>
          <li v-for="(menu, index) in $store.getters.navigationBar"
              @click="smallMenu({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"
              :key="index">
            <div>
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
                <path
                  d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
                  fill="#FFAA44"></path>
                <path
                  d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
                  fill="#FF7744"></path>
                <path
                  d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                  fill="#FFFFFF"></path>
              </svg>
              <span>&nbsp;{{ menu.sortName }}</span>
            </div>
          </li>

          <!-- 聊天室 -->
          <li @click="goIm()">
            <div>
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
                <path
                  d="M544.54784 628.16768a173.7216 173.7216 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.7216 173.7216 0 0 1 0 245.17632L788.992 628.16768a172.50816 172.50816 0 0 1-244.44416 0z m-325.49888 324.608a173.71648 173.71648 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.71648 173.71648 0 0 1 0 245.1712l-158.63808 159.09376a172.51328 172.51328 0 0 1-244.46976 0z"
                  fill="#F4CA1C"></path>
                <path
                  d="M415.6416 567.72096a36.58752 36.58752 0 0 1-25.99936-10.80832 215.58272 215.58272 0 0 1-63.52896-149.15072A203.80672 203.80672 0 0 1 385.536 259.072l163.1744-163.7376c80.70656-80.9728 213.86752-79.104 296.82688 4.13696a215.61856 215.61856 0 0 1 63.53408 149.15072 203.776 203.776 0 0 1-59.392 148.67968l-105.2928 101.83168a36.8384 36.8384 0 0 1-51.03616-53.13024l104.79104-101.376a130.12992 130.12992 0 0 0 37.376-94.78144 142.06976 142.06976 0 0 0-41.984-98.21184c-54.30272-54.48192-140.8-56.32-192.82944-4.13696L437.51936 311.26016a130.50368 130.50368 0 0 0-37.888 95.26272 142.08512 142.08512 0 0 0 41.984 98.21184 36.97664 36.97664 0 0 1 0 52.18304 36.58752 36.58752 0 0 1-25.97376 10.8032z m-169.30816 346.34752a214.74304 214.74304 0 0 1-152.20736-63.67232c-82.85184-83.13856-84.81792-216.48384-4.46976-297.472l104.96-110.80704a36.82816 36.82816 0 1 1 53.30432 50.83648l-105.91232 111.79008c-52.0192 52.1984-50.176 138.99264 4.1216 193.47456s140.8 56.32 192.82432 4.13184l163.18976-163.74784a130.47808 130.47808 0 0 0 37.888-95.232 142.09536 142.09536 0 0 0-41.984-98.21696 36.83328 36.83328 0 0 1 51.9936-52.18304 215.6288 215.6288 0 0 1 63.53408 149.15584 203.81184 203.81184 0 0 1-59.392 148.67968L390.95296 854.528a203.08992 203.08992 0 0 1-144.61952 59.54048z"
                  fill="#595BB3"></path>
              </svg>
              <span>&nbsp;社交</span>
            </div>
          </li>
          <!-- 微言 -->
<!--          <li @click="smallMenu({path: '/weiYan'})">-->
<!--            <div>-->
<!--              <svg viewBox="0 0 1024 1024" width="24" height="24" style="vertical-align: -3px;">-->
<!--                <path-->
<!--                  d="M252.8 862.9h-73.4c-6.8 0-12.4-5.6-12.4-12.4V134.4c0-6.8 5.6-12.4 12.4-12.4h73.4l5.3 6.8v728.8l-5.3 5.3z"-->
<!--                  fill="#F2B843"></path>-->
<!--                <path d="M338.5 942l-42.9-18.1-42.8 18.1v-79.1l7.5-5.3h71.3l7 5.3-0.1 79.1z" fill="#EA800C"></path>-->
<!--                <path-->
<!--                  d="M844.6 327.9h-40.7l-5.3-5.8v-93.3l5.3-7.2h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.9-5.6 12.4-12.4 12.4z"-->
<!--                  fill="#F2B843"></path>-->
<!--                <path-->
<!--                  d="M844.6 540.5h-40.7l-5.3-7.3v-90.6l5.3-8.4h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
<!--                  fill="#EA800C"></path>-->
<!--                <path-->
<!--                  d="M844.6 753h-40.7l-5.3-6.7v-92.1l5.3-7.5h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
<!--                  fill="#2F9B77"></path>-->
<!--                <path d="M791.8 862.9h-539V122h539.1c6.7 0 12 5.4 12 12v716.8c0 6.7-5.4 12.1-12.1 12.1z"-->
<!--                      fill="#3DC38A"></path>-->
<!--                <path-->
<!--                  d="M680.3 661.1H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5zM680.3 779.8H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5z"-->
<!--                  fill="#2F9B77"></path>-->
<!--                <path-->
<!--                  d="M594.8 511.1c-79.2 45.7-180.5 18.6-226.3-60.6S350 270 429.2 224.2s180.5-18.6 226.3 60.6 18.5 180.6-60.7 226.3z"-->
<!--                  fill="#3DC38A"></path>-->
<!--                <path-->
<!--                  d="M523.7 318.1c-1.2 0.3-3.5 0.9-4.5 1.7-1.2 1 0.7 2.3 0 2.9-1.2 1-2.1 2.7-4.7 2.6-5.5-0.3-13.9-7.5-19-10.2 8.1-8.3-4.7-9.6-9.7-9.1-6.5 0.5-17.7 0-23.5 3.2-4.1 2.3-9.5 11.7-12.8 15.5-4.6 5.2-9.1 9.8-12.1 16-10.9 23 5.9 49.4 32.2 46.3 7.3-0.9 14.9-5.5 21.4 0.6 4.8 4.5 2.3 8.7 3.5 13.9 1.1 4.5 6.1 7.3 7.8 11.4 3.3 7.9 1.2 12.9-1.1 20.2-3.1 9.6 4.9 21 8 30.2 1.6 4.7 6.1 17.7 10.7 19.8 7.1 3.2 18.1-6.4 22.4-11.6 3.3-4.1 2.2-8.2 4.4-12 2.4-4.1 5.4-5.3 7.1-10.6 1.8-5.7 3.7-7.1 7.5-11.3 6.2-6.7 5.2-10.6 2.7-18.6-5.1-16.5 13.5-24.2 21.8-36.3 8.7-12.6-8.2-8.4-14.8-12.8-6.8-4.4-9.8-12.9-13.1-19.9s-6-17.5-11.4-23.3c-4.2-4.3-16.9-6.4-22.8-8.6zM609.2 428.8c-2.6 8.9-5.3 17.8-7.9 26.7-1.8 6.2-8.4 26.6-17.5 13.6-3.5-5-0.6-11.4 1.3-16 2.4-5.8-0.9-8.7 0.9-14.1 2-6.2 10-6.4 13.8-10.8 2.7-3 4.3-7.9 6.2-11.5 1 4 2.1 8.1 3.2 12.1z"-->
<!--                  fill="#F2B843"></path>-->
<!--                <path-->
<!--                  d="M655.4 284.9c-28.5-49.4-78.7-78.5-131.6-82.4l-21.6 27.2-46.4 16.3-12.5 30.2 19.2 26.9 2-5.7c3.4-9.5 12.4-15.8 22.5-15.8h31.7l36.4 12.8 12.5 12v7.6l17.4 33.4 5.1-1.9c11-4 20.9-10.4 29.2-18.7l-4.2-6.3c-1.4-2 0.1-4.7 2.5-4.7h10.2c3 0 5.8 1.3 7.7 3.6l8.3 9.7c0.8 0.9 1.4 2 1.8 3.1l9.1 25.2 4.4-4.4c2.7-2.7 4.1-6.5 4.2-10.4 0-3.1 1.4-6.1 3.7-8.2l3.4-3c0.8-0.8 1.8-1.4 2.8-1.8-3.6-15.3-9.5-30.4-17.8-44.7zM407.6 291.3l7.9-8.5c5.8-6.2 7.4-15.2 4.2-23-3.4-8.3-10.9-13.6-19.2-14.8-29.2 26.5-47.4 62.2-52.6 100 6.2 5.4 12.6 11.2 12.6 11.7-0.1 1 23.2-2.9 23.2-2.9l-12-17.5 17.2-12.3 18.7-32.7zM423.8 456.4c7.5-2.4 11.6-10.4 9.1-17.9l-2.1-6.6c-0.9-2.9-0.9-5.9 0-8.8 2.7-8.1-2.4-16.8-10.8-18.4l-16.8-3.3-30.6-23.2-25.3 8.2c2.5 21.9 9.4 43.7 21.2 64.1 10.9 18.8 24.9 34.7 41 47.4l7.5-39.3 6.8-2.2z"-->
<!--                  fill="#2F9B77"></path>-->
<!--              </svg>-->
<!--              <span>&nbsp;微言</span>-->
<!--            </div>-->
<!--          </li>-->

          <!-- 留言 -->
          <li @click="smallMenu({path: '/message'})">
            <div>
              <svg viewBox="0 0 1024 1024" width="24" height="24" style="vertical-align: -3px;">
                <path
                  d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                  fill="#FFDEAD"></path>
                <path
                  d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                  fill="#FFF3DB"></path>
                <path
                  d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                  fill="#F2C182"></path>
                <path
                  d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                  fill="#69BAF9"></path>
                <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                      fill="#F7FBFF"></path>
                <path
                  d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                  fill="#D8E3F0"></path>
                <path
                  d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                  fill="#599ED4"></path>
                <path
                  d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                  fill="#3D3D63"></path>
                <path
                  d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                  fill="#3D3D63"></path>
              </svg>
              <span>&nbsp;留言</span>
            </div>
          </li>
          <!-- 友人帐 -->
          <li @click="smallMenu({path: '/friend'})">
            <div>
              <span>💃&nbsp;友人帐</span>
            </div>
          </li>

          <!-- 关于 -->
          <li @click="smallMenu({path: '/about'})">
            <div>
              <svg viewBox="0 0 1136 1024" width="26" height="26" style="margin-left: -5px;vertical-align: -5px;">
                <path
                  d="M255.015385 409.796923s-113.821538-16.344615-106.338462 80.147692c7.483077 96.295385 106.338462 78.769231 106.338462 78.769231s66.363077 252.652308 332.8 257.772308 346.584615-260.135385 346.584615-260.135385 106.338462 32.492308 116.381538-76.209231-111.458462-81.526154-111.458461-81.526153S888.123077 155.766154 587.815385 153.403077s-332.8 256.393846-332.8 256.393846z"
                  fill="#FFC0A9"></path>
                <path
                  d="M595.101538 846.375385h-7.68c-145.526154-2.756923-233.550769-76.8-281.6-138.436923-37.021538-47.458462-56.516923-94.326154-64.984615-118.153847-19.101538 0.393846-49.821538-2.56-74.633846-21.858461-22.252308-17.132308-34.855385-42.929231-37.415385-76.603077-2.56-31.901538 6.104615-57.304615 25.403077-75.421539 25.206154-23.630769 62.227692-27.569231 84.48-27.175384 5.907692-25.206154 20.283077-72.467692 53.76-119.729231 44.504615-62.621538 131.544615-137.058462 295.384616-135.68 163.052308 1.378462 255.212308 74.830769 303.852307 136.270769 36.627692 46.276923 54.547692 92.16 62.227693 116.775385 23.236923-2.166154 62.424615-1.378462 89.403077 22.252308 21.267692 18.707692 30.523077 46.670769 27.175384 83.101538-3.544615 38.006154-17.92 65.772308-42.732308 82.510769-27.372308 18.313846-60.258462 17.723077-80.344615 14.966154-9.649231 25.009231-31.704615 73.255385-70.892308 121.501539-72.073846 88.812308-169.353846 135.68-281.403077 135.68zM269.784615 545.673846l4.726154 17.92c0.196923 0.590769 16.541538 61.046154 63.803077 120.910769 62.227692 78.966154 146.313846 119.926154 249.895385 121.895385 248.32 4.529231 326.104615-243.396923 326.892307-245.956923l5.71077-19.298462 19.298461 5.907693c0.393846 0 39.384615 11.421538 65.378462-6.104616 14.375385-9.649231 22.843077-27.569231 25.009231-52.775384 2.166154-22.843077-2.363077-39.384615-13.587693-49.23077-20.086154-17.723077-59.864615-13.587692-73.452307-10.633846l-19.889231 4.529231-4.135385-20.086154c-0.196923-0.590769-12.996923-60.652308-60.258461-119.729231-62.818462-78.375385-154.387692-118.744615-271.753847-119.72923-117.76-0.984615-205.784615 38.990769-262.498461 118.744615-42.338462 59.667692-50.215385 119.532308-50.215385 120.123077l-2.56 20.283077-20.086154-2.953846c-13.193846-1.772308-51.593846-2.56-70.892307 15.556923-10.043077 9.452308-14.375385 23.630769-12.8 43.126154 1.772308 22.252308 8.861538 38.006154 22.055384 48.04923 23.827692 18.510769 60.455385 12.603077 60.849231 12.603077l18.510769-3.150769z"
                  fill="#493B4E"></path>
                <path
                  d="M481.069296 499.027638a35.050906 35.050906 0 1 0 3.652962-70.006569 35.050906 35.050906 0 1 0-3.652962 70.006569Z"
                  fill="#493B4E"></path>
                <path
                  d="M704.993567 510.606399a35.050906 35.050906 0 1 0 3.652961-70.00657 35.050906 35.050906 0 1 0-3.652961 70.00657Z"
                  fill="#493B4E"></path>
                <path
                  d="M537.6 597.464615s-5.710769 50.806154 48.836923 54.35077c54.547692 3.544615 54.547692-45.489231 54.547692-45.489231s37.021538-31.507692 50.412308 4.332308c13.390769 35.643077-40.172308 85.858462-95.113846 86.843076s-115.003077-41.550769-109.686154-97.476923c0-0.196923 19.495385-36.627692 51.003077-2.56z"
                  fill="#493B4E"></path>
                <path
                  d="M634.092308 172.307692s-118.350769 14.966154-93.932308 70.301539c24.418462 55.335385 81.329231 61.44 81.329231 61.44s119.926154 18.116923 33.28-54.547693c0 0-23.04 7.68-41.747693 2.166154s-21.070769-49.033846 4.923077-52.972307 98.067692 13.587692 103.384616 49.624615 41.353846 68.923077-61.243077 112.049231c0 0-144.738462 10.043077-162.264616-112.836923 0 0-17.329231-22.449231 17.132308-73.058462 34.264615-50.806154 119.138462-2.166154 119.138462-2.166154z"
                  fill="#493B4E"></path>
              </svg>
              <span>&nbsp;关于</span>
            </div>
          </li>

          <template v-if="$common.isEmpty($store.state.currentUser)">
            <li @click="smallMenu({path: '/user'})">
              <div>
                <i class="fa fa-sign-in" aria-hidden="true"></i>
                <span>&nbsp;登录</span>
              </div>
            </li>
          </template>
          <template v-else>
            <li @click="smallMenu({path: '/user'})">
              <div>
                <i class="fa fa-user-circle" aria-hidden="true"></i>
                <span>&nbsp;个人中心</span>
              </div>
            </li>
            <li @click="smallMenuLogout()">
              <div>
                <i class="fa fa-sign-out" aria-hidden="true"></i>
                <span>&nbsp;退出</span>
              </div>
            </li>
          </template>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import mousedown from '../utils/mousedown';

  export default {
    data() {
      return {
        toolButton: false,
        hoverEnter: false,
        mouseAnimation: false,
        isDark: false,
        scrollTop: 0,
        toolbarDrawer: false,
        mobile: false
      }
    },
    mounted() {
      if (this.mouseAnimation) {
        mousedown();
      }
      window.addEventListener("scroll", this.onScrollPage);
      if (this.isDaylight()) {
        this.isDark = true;
        let root = document.querySelector(":root");
        root.style.setProperty("--background", "#272727");
        root.style.setProperty("--fontColor", "white");
        root.style.setProperty("--borderColor", "#4F4F4F");
        root.style.setProperty("--borderHoverColor", "black");
        root.style.setProperty("--articleFontColor", "#E4E4E4");
        root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
        root.style.setProperty("--commentContent", "#D4D4D4");
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.onScrollPage);
    },
    watch: {
      scrollTop(scrollTop, oldScrollTop) {
        //如果滑动距离超过屏幕高度三分之一视为进入页面，背景改为白色
        let enter = scrollTop > window.innerHeight / 2;
        const top = scrollTop - oldScrollTop < 0;
        let isShow = scrollTop - window.innerHeight > 30;
        this.toolButton = isShow;
        if (isShow && !this.$common.mobile()) {
          if (window.innerHeight > 950) {
            $(".cd-top").css("top", "0");
          } else {
            $(".cd-top").css("top", window.innerHeight - 950 + "px");
          }
        } else if (!isShow && !this.$common.mobile()) {
          $(".cd-top").css("top", "-900px");
        }

        //导航栏显示与颜色
        let toolbarStatus = {
          enter: enter,
          visible: top,
        };
        this.$store.commit("changeToolbarStatus", toolbarStatus);
      },
    },
    created() {
      let toolbarStatus = {
        enter: false,
        visible: true,
      };
      this.$store.commit("changeToolbarStatus", toolbarStatus);
      this.getWebInfo();
      this.getSortInfo();

      this.mobile = document.body.clientWidth < 920;

      window.addEventListener('resize', () => {
        let docWidth = document.body.clientWidth;
        if (docWidth < 920) {
          this.mobile = true;
        } else {
          this.mobile = false;
        }
      });
    },
    computed: {
      toolbar() {
        return this.$store.state.toolbar;
      }
    },
    methods: {
      smallMenu(data) {
        this.$router.push(data)
        this.toolbarDrawer = false;
      },

      smallMenuLogout() {
        this.logout();
        this.toolbarDrawer = false;
      },

      goIm() {
        if (this.$common.isEmpty(this.$store.state.currentUser)) {
          this.$message({
            message: "请先登录！",
            type: "error"
          });
        } else {
          let userToken = this.$common.encrypt(localStorage.getItem("userToken"));
          window.open(this.$constant.imBaseURL + "?userToken=" + userToken);
        }
      },
      logout() {
        this.$http.get(this.$constant.baseURL + "/user/logout")
          .then((res) => {
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
        this.$store.commit("loadCurrentUser", {});
        localStorage.removeItem("userToken");
        this.$router.push({path: '/'});
      },
      getWebInfo() {
        this.$http.get(this.$constant.baseURL + "/webInfo/getWebInfo")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.$store.commit("loadWebInfo", res.data);
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      getSortInfo() {
        this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.$store.commit("loadSortInfo", res.data);
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      changeColor() {
        this.isDark = !this.isDark;
        let root = document.querySelector(":root");

        if (this.isDark) {
          root.style.setProperty("--background", "#272727");
          root.style.setProperty("--fontColor", "white");
          root.style.setProperty("--borderColor", "#4F4F4F");
          root.style.setProperty("--borderHoverColor", "black");
          root.style.setProperty("--articleFontColor", "#E4E4E4");
          root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
          root.style.setProperty("--commentContent", "#D4D4D4");
        } else {
          root.style.setProperty("--background", "white");
          root.style.setProperty("--fontColor", "black");
          root.style.setProperty("--borderColor", "rgba(0, 0, 0, 0.5)");
          root.style.setProperty("--borderHoverColor", "rgba(110, 110, 110, 0.4)");
          root.style.setProperty("--articleFontColor", "#1F1F1F");
          root.style.setProperty("--articleGreyFontColor", "#616161");
          root.style.setProperty("--commentContent", "#F7F9FE");
        }
      },
      toTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      },
      onScrollPage() {
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      },
      isDaylight() {
        let currDate = new Date();
        if (currDate.getHours() > 22 || currDate.getHours() < 7) {
          return true;
        } else {
          return false;
        }
      },
      changeMouseAnimation() {
        this.mouseAnimation = !this.mouseAnimation;
        if (this.mouseAnimation) {
          this.$nextTick(() => {
            mousedown();
          });
        }
      }
    }
  }
</script>

<style scoped>

  .toolbar-content {
    width: 100%;
    height: 60px;
    color: var(--white);
    /* 固定位置，不随滚动条滚动 */
    position: fixed;
    z-index: 100;
    /* 禁止选中文字 */
    user-select: none;
    transition: all 0.3s ease-in-out;
  }

  .toolbar-content.enter {
    background: var(--toolbarBackground);
    color: var(--toolbarFont);
    box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
  }

  .toolbar-content.hoverEnter {
    background: var(--translucent);
    box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
  }

  .toolbar-title {
    margin-left: 30px;
    cursor: pointer;
  }

  .toolbar-mobile-menu {
    font-size: 30px;
    margin-right: 15px;
    cursor: pointer;
  }

  .scroll-menu {
    margin: 0 25px 0 0;
    display: flex;
    justify-content: flex-end;
    padding: 0;
  }

  .scroll-menu > li {
    list-style: none;
    margin: 0 12px;
    font-size: 17px;
    height: 60px;
    line-height: 60px;
    position: relative;
    cursor: pointer;
  }

  .scroll-menu > li:hover .my-menu span {
    color: var(--themeBackground);
  }

  .scroll-menu > li:hover .my-menu i {
    color: var(--themeBackground);
    animation: scale 1.5s ease-in-out infinite;
  }

  .scroll-menu > li .my-menu:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 6px;
    background-color: var(--themeBackground);
    width: 100%;
    max-width: 0;
    transition: max-width 0.25s ease-in-out;
  }

  .scroll-menu > li:hover .my-menu:after {
    max-width: 100%;
  }

  .el-dropdown {
    font-size: unset;
    color: unset;
  }

  .el-popper[x-placement^=bottom] {
    margin-top: -8px;
  }

  .el-dropdown-menu {
    padding: 5px 0;
  }

  .el-dropdown-menu__item {
    font-size: unset;
  }

  .el-dropdown-menu__item:hover {
    background-color: var(--white);
    color: var(--themeBackground);
  }

  .toolButton {
    position: fixed;
    right: 3vh;
    bottom: 3vh;
    animation: slide-bottom 0.5s ease-in-out both;
    z-index: 100;
    cursor: pointer;
    font-size: 25px;
  }

  .my-setting {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    cursor: pointer;
    font-size: 20px;
  }

  .my-setting i {
    padding: 5px;
  }

  .my-setting i:hover {
    color: var(--themeBackground);
  }

  .cd-top {
    background: var(--toTop) no-repeat center;
    position: fixed;
    right: 5vh;
    top: -900px;
    z-index: 99;
    width: 70px;
    height: 900px;
    background-size: contain;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
  }

  .backTop {
    transition: all 0.3s ease-in;
    position: relative;
    top: 0;
    left: -13px;
  }

  .backTop:hover {
    top: -10px;
  }

  @media screen and (max-width: 400px) {
    .toolButton {
      right: 0.5vh;
    }
  }
</style>
